<template>
	<view style="position: relative;">
		<view>
			<view
				style="height: 321rpx;background-color: #00C657;box-sizing: border-box; padding-top: 81rpx; border-radius: 0 0 40rpx 40rpx;">
				<image src="/static/waimai/返回@2x.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;"
					mode="aspectFit"></image>
				<text style="font-size: 34rpx;color: #fff;">确认订单</text>
			</view>
			<!-- <view style="width: 690rpx;height: 313rpx;margin: -150rpx 30rpx; box-shadow: 0 0 5rpx 1rpx #999;background-color: #fff;border-radius: 14rpx;"> -->
			<!-- 头部选项卡 -->
			<!-- <view class="head-nav">
					<view style="margin: 0 35rpx;" v-for="(item, index) in ps" :class="{ activite: checkIndex === index }" @click="psIndex(index)">
						{{ item }}
						<view class="select"></view>
					</view>
				</view> -->
			<view class="addressInfo" style="min-width: 680rpx;" @click="goto()">
				<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
					<text style="font-size: 34rpx;color: #1B1B1B;">{{address?address.address:'请选择收货地址'}}</text>
					<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit">
					</image>
				</view>
				<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;" v-if="address">
					<text>{{address.realname}}</text>
					<text style="margin-left: 15rpx;">{{address.mobile}}</text>
				</view>
				<view style="margin: 0 30rpx;font-size: 24rpx;" v-if="address">
					<text style="color: #1B1B1B;">立即送出</text>
					<!-- <text style="color: #999999;margin-left: 350rpx;">大约11:25送达</text>
					<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;"
						mode="aspectFit"></image> -->
				</view>
			</view>
			<!-- <view v-if="checkIndex === 1">
					<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 34rpx;color: #1B1B1B;">提货点:招港大厦</text>
						<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;">
						<text>张三(先生)</text>
						<text style="margin-left: 15rpx;">13898493923</text>
					</view>
					<view style="margin: 0 30rpx;font-size: 24rpx;">
						<text style="color: #1B1B1B;">提货时间</text>
						<text style="color: #999999;margin-left: 350rpx;">3月12日</text>
						<text style="color: #999999;margin-left: 6rpx;">16:00</text>
						<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="checkIndex === 2">
					<view style="margin: -20rpx 30rpx 0;display: flex;justify-content: space-between;align-items: center;">
						<text style="font-size: 34rpx;color: #1B1B1B;">招港大厦</text>
						<image src="/static/waimai/返回@2x(1).png" style="width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
					<view style="font-size: 24rpx;color: #999;margin: 10rpx 30rpx 20rpx;">
						<text>张三(先生)</text>
						<text style="margin-left: 15rpx;">13898493923</text>
					</view>
					<view style="margin: 0 30rpx;font-size: 24rpx;">
						<text style="color: #1B1B1B;">送达时间</text>
						<text style="color: #999999;">(蜂鸟同城配送)</text>
						<text style="color: #999999;margin-left: 190rpx;">大约11:25送达</text>
						<image src="/static/waimai/返回@2x(1).png" style="margin-left: 15rpx; width: 11rpx;height: 22rpx;" mode="aspectFit"></image>
					</view>
				</view>
			 -->
			<!-- </view> -->
			<view style="height: 20rpx;background-color: #f7f7f7;margin-top: 160rpx;"></view>
			<!-- 订单详情 -->
			<view style="font-size: 24rpx;margin: 30rpx;color: #1B1B1B;">
				<view class="shop" v-for="v in cartsInfo" :key='v.id'>
					<!-- <text>店铺名称</text> -->
					<!-- <view style="display: flex;flex-wrap: nowrap;margin-top: 30rpx;">
						<image src=""
							style="background-color: #707895; margin-right: 14rpx; border-radius: 10rpx; width: 100rpx;height: 100rpx;"
							mode="aspectFit"></image>
						<view style="display: flex;flex-direction: column;">
							<text>鲜肉水饺-大份(15个)</text>
							<text style="color: #999; margin: 3rpx 0;">大份(15个)</text>
							<text style="color: #999;">×1</text>
						</view>
						<text style="font-size: 22rpx;margin-top: 70rpx;margin-left: 280rpx;">¥12.5</text>
					</view> -->
					<view style="display: flex;flex-wrap: nowrap;margin-top: 30rpx;">
						<image src=""
							style="background-color: #707895; margin-right: 14rpx; border-radius: 10rpx; width: 100rpx;height: 100rpx;"
							mode="aspectFit"></image>
						<view style="display: flex;flex-direction: column;">
							<text>{{v.title}}({{v.num}}个)</text>
							<!-- <text style="color: #999; margin: 3rpx 0;">{{v.title}}({{v.num}}个)</text> -->
							<text style="color: #999; margin-top: 20rpx;">×{{v.num}}</text>
						</view>
						<text
							style="font-size: 22rpx;margin-top: 70rpx;text-align: right;flex: 1;">¥{{parseFloat(v.num)*parseFloat(v.price)}}</text>
					</view>
				</view>
			</view>
			<view
				style="font-size: 24rpx;color: #999; display: flex;align-items: center;justify-content: center;margin-top: -150rpx;">
				<text style="margin-right: 4rpx;">展开更多</text>
				<image src="/static/index/返回@2x.png" style="width: 22rpx;" mode="aspectFit"></image>
			</view>
			<view style="margin: 0 30rpx; margin-top: -170rpx;font-size: 26rpx;color: #1B1B1B;line-height: 60rpx; ">
				<view class="dabao">
					<text>打包费</text>
					<text>¥{{shopInfo.pack_price}}</text>
				</view>
				<view class="dabao">
					<text>配送费</text>
					<view>
						<!-- <text
									style="margin-right: 4rpx; text-decoration: line-through;font-size: 18rpx;color: #999;">¥5.5</text> -->
						<text>¥{{shopInfo.delivery_price}}</text>
					</view>
				</view>
				<view class="dabao">
					<text>优惠券</text>
					<view v-if="selectTicket" @click="open('bottom')">
						<text style="font-size: 22rpx;color: #F61B00;">-¥{{selectTicket.discount}}</text>
						<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;"
							mode="aspectFit"></image>
					</view>
					<view style="text-align: right;font-size: 24rpx;" v-else>
						<view v-if="tickets.length==0">暂无可用优惠券</view>
						<view v-else @click="open('bottom')">
							{{tickets.length}}张可用代金优惠券
						</view>
					</view>
				</view>
				<!-- <view class="dabao">
					<text>积分抵扣</text>
					<text style="font-size: 22rpx;color: #F61B00;">-¥8</text>
				</view> -->
				<view style="text-align: right;font-size: 24rpx;">
					<text>已优惠</text>
					<text style="color: #F61B00;">¥{{selectTicket.discount||0}}</text>
					<text style="margin-left: 15rpx;">小计</text>
					<text style="color: #F61B00;">¥{{price}}</text>
				</view>
			</view>
			<view style="height: 20rpx;background-color: #F7F7F7;"></view>
			<view style="margin: 0 30rpx;">
				<view class="dabao" style="margin: 30rpx 0;">
					<text>备注</text>
					<view>
						<text style="font-size: 24rpx;">这是一条备注</text>
						<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;"
							mode="aspectFit"></image>
					</view>
				</view>
				<!-- <view class="dabao">
					<text>发票</text>
					<view>
						<text style="font-size: 24rpx;">张三有限公司</text>
						<image src="/static/index/返回@2x(1).png" style="width: 11rpx;height: 22rpx;margin-left: 8rpx;"
							mode="aspectFit"></image>
					</view>
				</view>
				<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 390rpx;">sx888777878zds878saz4</text> -->
			</view>
			<view style="display: flex;">
				<view class="zf" style="flex-direction: column;width:564rpx;height: 110rpx;">
					<text style="color: #F61B00;font-size: 20rpx;">¥{{price}}</text>
					<!-- <text style="color: #999;font-size: 24rpx;">已优惠¥2.5</text> -->
				</view>
				<!-- <text class="zf"
					style="font-size: 32rpx;color: #00C657;width: 240rpx;height: 110rpx; background-color: #F5FDF8;">找朋友代付</text> -->
				<text class="zf" @click="buy()"
					style="font-size: 32rpx;color: #fff;width:240rpx;height: 110rpx; background-color: #00C657;">提交订单</text>
			</view>
		</view>
		<uni-popup ref="popup" type="top" :mask-click="false">
			<view
				style="display: flex;flex-direction: column; color: #1B1B1B; width: 538rpx;height: 502rpx;border-radius: 24rpx;background-color: #fff;position: absolute;top: 500rpx;left: 106rpx;">
				<image @click="close" src="/static/waimai/错误.png"
					style="width: 24rpx;height: 23rpx;margin: 35rpx 0 0 480rpx;" mode="aspectFit"></image>
				<text style="font-size: 32rpx;margin: 0 150rpx 89rpx;">请确认收货信息</text>
				<text style="font-size: 26rpx;margin: 0 0 28rpx 39rpx;">收货地址:成都市武侯区205号成都市</text>
				<text style="font-size: 26rpx;margin: 0 0 89rpx 39rpx;">收货人︰张三12345678910</text>
				<navigator url="/pages/pay/pay">
					<button type="default"
						style="width: 274rpx;height: 72rpx;font-size: 26rpx;border-radius: 36rpx;background-color: #00C657;color: #fff;margin: 0 132rpx 60rpx;">
						确认,立即支付
					</button>
				</navigator>
			</view>
		</uni-popup>

		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view
				style="height: 749rpx;border-radius: 30rpx 30rpx 0 0;background-color: #fff;padding-top: 45rpx;box-sizing: border-box;">
				<view style="display: flex;flex-direction: column;">
					<image src="/static/login/qx.png" style="width: 24rpx;height: 19rpx;margin: 10rpx 30rpx 0 680rpx;"
						@click="close" mode="aspectFit"></image>
					<text style="font-size: 34rpx;color: #1B1B1B;margin: 0 290rpx">优惠券</text>
				</view>
				<!-- 优惠券 -->
				<block v-for="(tic,index) in tickets" :key="tic.id">
					<view
						style="display: flex; font-size: 24rpx;box-shadow: 0 0 5rpx 2rpx #f7f7f7;width: 690rpx;height: 170rpx;border-radius: 24rpx;margin: 60rpx auto -10rpx;">
						<view style="color: #FF6F00;margin-left: 26rpx;display: flex;align-items: center;">
							<text>¥</text>
							<text>{{tic.discount}}</text>
						</view>
						<view
							style="color: #999;display: flex;flex-direction: column;margin: 33rpx 0 33rpx 30rpx;line-height: 40rpx;">
							<text style="font-size: 32rpx;color: #1B1B1B;">{{tic.voucher_title}}</text>
							<text>满{{tic.condition}}可用</text>
							<text>{{formatDate(tic.endtime)}}到期</text>
						</view>
						<button type="default"
							style="width: 140rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;background-color: #00C657;margin: 55rpx 30rpx 55rpx 180rpx;"
							:class="{'btn':tic.flag }" @click="changeTicket(tic)" :disabled="tic.flag">使用</button>
					</view>
				</block>
			</view>
			<view style="background-color: #fff;height: 80rpx;"></view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		Storage
	} from "@/static/libs/utils"
	import {
		getDate,
		shortTime,
		reallyBuy
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				checkIndex: 0,
				ps: ['外卖配送', '门店自提', '同城配送'],
				show: false,
				address: '',
				goodsInfo: '',
				lat: '',
				lng: '',
				token: '',
				openid: '',
				shopInfo: '', //店铺信息
				cartsInfo: [], //购物车信息
				tickets: [], //优惠券
				today: '',
				selectTicket: '', //选中优惠券
				sid: '' //店铺id
			};
		},
		methods: {
			openPopup() {
				this.$refs.popup.open('bottom')
			},
			add0(m) {
				return m < 10 ? '0' + m : m
			},
			formatDate(needTime) { //时间戳转换
				//needTime是整数，否则要parseInt转换
				var time = new Date(needTime * 1000);
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				return y + '-' + this.add0(m) + '-' + this.add0(d);
			},
			psIndex(index) {
				this.checkIndex = index;
			},
			cancel() {
				this.show = false;
			},
			ddan() {
				this.show = true;
			},
			open(v) {
				this.$refs.popup.open(v);
			},
			close() {
				this.$refs.popup.close()
			},
			buy() {
				//创建订单
				var data = {
					predict_index: 12,
					predict_time_cn: '立即送出',
					predict_day_cn: this.today,
					order_type: 1,
					person_num: '',
					member_choice: [],
					address_id: this.address.id,
					note: '这是一个备注',
					formId: "the formId is no longer available in develop or trial version of this mini program",
                    coupon_id:this.selectTicket.id||''
				}
				var data = JSON.stringify(data);
				var that = this;
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=create&ta=submit&from=wxapp&state=${this.token}&cid=0&sid=${this.shopInfo.id}&extra=${data}&is_pindan=undefined&pindan_id=undefined&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
				).then(res => {
					console.log(res);
					if(res.data.message.errno==0){
						var id = res.data.message.message;
						that.openid = Storage.get('openid')
						this.$request.post(
							`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=system&ac=paycenter&op=pay&from=wxapp
							&state=${that.token}&openid=${that.openid}&pay_type=wechat&order_type=takeout&id=${id}&scene=1001&lat=${that.lat}&lng=${that.lng}&__lat=${that.lat}&__lng=${that.lng}`
						).then(res => {
							var obj = res.data.message.message;
							that.reallyBuy(obj,id,1);
						})
					}else{
						uni.showToast({
							title:res.data.message.message,
							icon:'none'
						})
					}
					
				})
			},
			close() {
				this.$refs.popup.close();
			},
			youhui() {
				//获取优惠券列表
				var data = {
					predict_index: 11,
					predict_time_cn: "立即送出",
					predict_day_cn: this.today,
					address_id: "",
					order_type: "1",
					person_num: "",
					member_choice: [],
					"coupon_id": "0"
				}
				data = JSON.stringify(data);
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=create&ta=index&from=wxapp&state=${this.token}&sid=${this.shopInfo.id}&extra=${data}&is_buysvip=0&is_pindan=0&pindan_id=undefined&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
				).then(res => {
					console.log(res);
					this.tickets = res.data.message.message.coupons || [];
				})
			},
			goto() {
				uni.navigateTo({
					url: '/pages/address/address?type=1'
				})
			},
			otherFun(obj) {
				this.address = obj;
			},
			getDate,
			shortTime,
			reallyBuy,
			changeTicket(v) {
				//选择优惠券
				this.selectTicket = v;
				var data = {
					predict_index: 11,
					predict_time_cn: "立即送出",
					predict_day_cn: this.today,
					address_id: "",
					order_type: "1",
					person_num: "",
					member_choice: [],
					coupon_id: v.id
				}

				data = JSON.stringify(data);
				this.$request.post(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=create&ta=index&from=wxapp&state=${this.token}&sid=${this.sid}&extra=${data}&is_buysvip=0&is_pindan=undefined&pindan_id=undefined&scene=1001&goods_id=0&sign=''`
				).then(res => {
					console.log(res);
				});
				this.close();
			}
		},
		onLoad(e) {
			this.token = Storage.get('token');
			this.lat = Storage.get('latitude');
			this.lng = Storage.get('longitude');
			//获取当前时间
			var time = new Date().getTime();
			var today = getDate(time);
			this.today = shortTime(today);
			var that = this;
			// 查询购物车信息
			this.$request.post(
				`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=cart&ta=index&from=wxapp&state=${this.token}&min=0&forceLocation=1&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
			).then(res => {
				var arr = [];
				var cartsInfo = res.data.message.cartsInfo;
				cartsInfo.map(v => {
					v.cart.data.map(v2 => {
						Object.keys(v2).forEach(kk => {
							arr.push(v2[kk]);
						})
					})
				})
				console.log(arr);
				that.cartsInfo = arr;
			})
			//查询商铺信息
			this.$request.post(
				`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=order&op=cart&ta=index&from=wxapp&state=${this.token}&min=0&forceLocation=1&scene=1001&lat=${this.lat}&lng=${this.lng}&__lat=${this.lat}&__lng=${this.lng}`
			).then(res => {
				var arr = [];
				var cartsInfo = res.data.message.cartsInfo;
				cartsInfo.map(v => {
					v.cart.data.map(v2 => {
						Object.keys(v2).forEach(kk => {
							arr.push(v2[kk]);
						})
					})
				})
				that.cartsInfo = arr;
				that.$request.get(
					`/waimai_go/app/wxapp.php?i=1&v=undefined&m=we7_wmall&c=entry&do=mobile&ctrl=wmall&ac=store&op=goods&ta=index&from=wxapp&state=${that.token}&cid=0&sid=${arr[0].sid}&code=undefined&order_id=undefined&__lat=${that.lat}&__lng=${that.lng}&forceLocation=1&configmall=1&scene=1001&lat=${that.lat}&lng=${that.lng}`
				).then(res => {
					that.shopInfo = res.data.message.message.store;
					that.sid = that.shopInfo.id
					//查询优惠券信息
					that.youhui();
				})
			})


		},
		computed: {
			price() {
				var price = 0;
				this.cartsInfo.map(v => {
					price += v.total_price;
				})
				console.log(price);
				price = this.shopInfo.pack_price * 1 + this.shopInfo.delivery_price * 1 + price * 1-(this.selectTicket.discount*1||0);
				return price
			}
		}
	};
</script>

<style lang="scss">
	.zf {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dabao {
		display: flex;
		justify-content: space-between;
	}

	.select {
		display: none;
		width: 60rpx;
		height: 8rpx;
		background-color: #00c657;
		margin-left: 30rpx;
		border-radius: 4rpx;
	}

	.activite {
		.select {
			display: block;
			margin-top: 10rpx;
		}
	}

	.addressInfo {
		background-color: #FFFFFF;
		position: absolute;
		top: 188rpx;
		left: 36rpx;
		padding: 50rpx 0;
		box-shadow: 0 0 5rpx 1rpx #999;
		border-radius: 14rpx;
	}

	.head-nav {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		font-size: 30rpx;
		color: #666666;
		padding: 57rpx 0rpx;
	}

	.noTicket {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		color: #808080;
	}
</style>
